<!-- 点击编辑和添加 弹出的对话框-->
<template>
  <el-dialog v-model="isShow" title="分配角色" :before-close="() => close()">
    <el-form :model="newForm">
      <el-form-item label="账号:">
        <el-input v-model="newForm.username" autocomplete="off" />
      </el-form-item>
      <el-form-item label="姓名:">
        <el-input v-model="newForm.nickName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="邮箱:">
        <el-input v-model="newForm.email" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码:">
        <el-input
          v-model="newForm.password"
          autocomplete="off"
          type="password"
        />
      </el-form-item>
      <el-form-item label="备注:">
        <el-input
          v-model="newForm.note"
          :autosize="{ minRows: 2, maxRows: 4 }"
          type="textarea"
        />
      </el-form-item>
      <el-form-item label="是否启用:">
        <el-radio-group v-model="form.status" class="ml-4">
          <el-radio :label="1" size="large">是</el-radio>
          <el-radio :label="0" size="large">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="close()">取消</el-button>
      <el-button type="primary" @click="submit">确定</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ElMessage } from "element-plus";
import { ref, watch } from "vue";
import { umsAdmin } from "../../../../request/http";

// 父传子 声明，赋予默认值
const props = withDefaults(
  defineProps<{
    isShow: boolean;
    form: AdminResDataObj;
  }>(),
  {
    isShow: false,
    form: () => ({} as AdminResDataObj),
  }
);
// 子传父，声明
const emit = defineEmits<{
  (event: "close", r?: "reload"): void;
}>();
function close(r?: "reload") {
  // 关闭弹窗
  emit("close", r);
}

// 创建一个变量来接收父组件传过来的值
const newForm = ref({} as AdminResDataObj);
watch(
  () => props.form,
  (val) => {
    newForm.value = { ...val }; //使用扩展运算符，就不会造成同个引用地址，一改父组件数据跟着改的情况
  }
);

// 点击确定按钮
async function submit() {
  let res;
  let msg;
  if (newForm.value.id) {
    res = await umsAdmin.adminUpdate(newForm.value);
    msg = "修改用户信息成功!";
  } else {
    res = await umsAdmin.registerAdmin(newForm.value);
    msg = "添加用户信息成功!";
  }
  if (res.code === 200) {
    // 关闭对话框弹窗,需要父组件重新发送请求时，传递参数reload
    close("reload");
    // 提示组件
    ElMessage({
      message: msg,
      type: "success",
    });
  }
}
</script>
<style lang="less" scoped></style>
